<template>
  <div>
     <!-- 覆盖层 -->
     <div v-if="showOverlay" class="overlay" @click="closeOverlay">
      <div class="overlay-content">
          <img src="https://hldc-xjr.obs.cn-east-3.myhuaweicloud.com/teacher/1716434017262_724c40e018b211efa309c75a82945b2b.png" alt="" class="topImg" />
        </div>
    </div>
    <div class="wrap">
      <van-search
        v-model="keyWord"
        background="#007fff"
        shape="round"
        show-action
        placeholder="搜索课程或者主讲人"
        @clear="init()"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch" style="color: #fff">搜索</div>
        </template>
      </van-search>
      <!-- <van-search v-model="keyWord" placeholder="搜索课程或者主讲人" /> -->
      <van-tabs @change="tagClick" v-model="tagId">
        <van-tab
          v-for="(item, index) in list"
          color="#007fff"
          title-active-color="#007fff"
          :title="item.name"
          :name="item.id"
          :key="index"
        >
        </van-tab>
      </van-tabs>
      <div class="btn-group" @click="judgePhoneType">
        <div class="float-wrap">
          <div class="float-logo-wrap">
            <img
              class="float-logo"
              src="https://hldc-xjr.obs.cn-east-3.myhuaweicloud.com/special/1664158519960_11d391803d4111edb3671b613ba37299.png"
              alt=""
            />
          </div>
          <div class="float-text">打开App</div>
        </div>
        <WxOpen v-if="isWeixin"> </WxOpen>
      </div>
    </div>
    <div style="height: 100px"></div>
    <div>
      <div class="foster-list" @scroll="handleScroll">
        <div
          class="foster-list-msg"
          v-for="(item, index) in cardList"
          :key="index"
          @click="goPage(item.id)"
        >
          <!-- <div class="liveing">直播回放</div>
          <div class="free">免费</div> -->
          <div class="foster-list-msg-img">
            <img
              class="float-logo"
              width="100%"
              height="auto"
              :src="item.coverUrl"
            />
          </div>
          <div class="foster-list-msg-list">
            <div class="foster-list-msg-list-msg1">{{ item.name }}</div>
            <div class="foster-list-msg-list-msg4 dis">
              <div class="foster-list-msg-list-msg4-left">
                <img class="float-logo" :src="item.speakerCoverUrl" alt="" />
                <div class="name">{{ item.speaker }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CallApp from "callapp-lib";
import { Toast, Tab, Tabs, Search, Dialog } from "vant";
import Vue from "vue";
Vue.use(Toast);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Search);
Vue.use(Dialog);

export default {
  name: "list",
  data() {
    return {
      tagId: "", // 默认限时免费
      keyWord: "",
      list: [],
      cardList: [],
      isWeixin: false,
      btnBool: true,
      yzmtext: "获取验证码",
      pageNo: 1, // 当前页数
      pageSize: 10, // 每页数据条数
      totalPages: 0, // 总页数
      loadingData: false, // 是否正在加载数据
      wechatState: false,
      showOverlay: false, // 新增: 控制覆盖层显示
      overlayImageSrc: '' // 新增: 覆盖层图片源
    };
  },
  created() {
    this.init();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollHeight = document.documentElement.scrollHeight;
      const scrollTop = window.scrollY || window.pageYOffset;
      const clientHeight = window.innerHeight;
      const reachedBottom = scrollHeight - scrollTop === clientHeight;

      if (reachedBottom) {
        console.log("Reached the bottom of the page!");
        // 执行你想要的操作
        this.loadMore();
      }
    },
    // 加载更多数据
    loadMore() {
      // 如果已加载的数据数量已经大于等于总数据数，则停止加载更多数据
      if (this.cardList.length >= this.totalDataCount) {
        console.log("No more data to load!");
        return;
      }

      // 计算总页数
      const totalPages = Math.ceil(this.totalDataCount / this.pageSize);
      // 如果当前页数已经超过了总页数，则停止加载更多数据
      if (this.pageNo > totalPages) {
        console.log("No more data to load!");
        return;
      }

      // 更新页数
      this.pageNo++;
      // 发送请求获取更多数据
      this.$get("home/queryCourse", {
        specialId: this.tagId,
        query: this.keyWord,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
      }).then((res) => {
        // 将新获取的数据追加到原数据列表中
        this.cardList = [...this.cardList, ...res.data.records];
      });
    },
    init() {
      if (this.$route.query.specialId) {
        this.tagId = this.$route.query.specialId;
      } else {
        this.tagId = "1585826041761374210";
      }
      if (this.$route.query.query) {
        this.keyWord = this.$route.query.query;
      }
      this.getList();
      this.onSearch();
    },
    getList() {
      this.$get("home/getH5SpecialAll").then((res) => {
        this.list = res.data;
      });
    },
    goPage(id) {
      this.$router.push({ path: "/xinjiaren/detail", query: { courseId: id } });
    },

    tagClick(id) {
      if (this.loadingData) {
        // 如果正在加载数据，则直接返回，避免重复发送请求
        return;
      }
      this.loadingData = true; // 设置标志为 true，表示正在加载数据
      this.tagId = id;
      this.pageNo = 1; // 重置页码为1
      this.$get("home/queryCourse", {
        specialId: this.tagId,
        query: this.keyWord,
        pageSize: 10,
        pageNo: this.pageNo,
      })
        .then((res) => {
          this.cardList = res.data.records;
          this.loadingData = false; // 数据加载完成后，将标志设置为 false
        })
        .catch(() => {
          this.loadingData = false; // 发生错误时也需要将标志设置为 false
        });
    },
    onSearch() {
      this.tagClick(this.tagId);
    },
    judgePhoneType() {
      var u = navigator.userAgent;
      var isWeixin = u.toLowerCase().indexOf("micromessenger") !== -1; // 微信内
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      this.isWeixin = isWeixin;
      this.isIOS = isIOS;
      this.isAndroid = isAndroid;
      // 微信内
      if (isWeixin) {
        this.judgeNavigator();
        // Dialog.alert({ message: "微信浏览器" });
      } else {
        // if (isAndroid) {
        //   // Dialog.alert({ message: "isAndroid" });
        // }
        Dialog.confirm({
          title: "",
          message: '即将离开微信,打开"星家人"',
        })
          .then(() => {
            this.toBrowser();
          })
          .catch(() => {});
      }
    },
    judgeNavigator() {
      // 微信版本号大于 7.0.12 开放标签才可进行 唤醒 app 跳转
      const wechatInfo = window.navigator.userAgent.match(
        /MicroMessenger\/([\d\.]+)/i // eslint-disable-line
      );
      if (!wechatInfo) return;
      let judgewechat = wechatInfo[1].split(".");
      let flag = false;
      if (judgewechat[0] >= 7) {
        if (judgewechat[1] >= 0) {
          if (judgewechat[2] >= 12) {
            console.log("当前符合 h5 打开指定app");
            this.showOverlay = true
            flag = true;
          }
        }
      }
      if (!flag) Dialog.alert({ message: "请升级当前微信版本" });
    },
    toBrowser() {
      // window.location.href = `wechatextmsg://com.mm.example.starfamilypro?id=${this.courseId}`;
      // window.location.href = `intent://wechatextmsg/#Intent;scheme=wechatextmsg;package=http://com.mm.example.starfamilypro;end`;
      const options = {
        scheme: {
          protocol: "wechatextmsg", //APP 协议
          host: "com.mm.example.starfamilypro",
        },
        intent: {
          package: "com.mm.example.starfamilypro",
          scheme: "wechatextmsg",
        },
        universal: {
          host: "xingjiaren-h5.hailiangedu.com",
        },
        appstore:
          "https://apps.apple.com/cn/app/%E6%98%9F%E5%AE%B6%E4%BA%BA/id1582745268?from=groupmessage&isappinstalled=0",
        yingyongbao: "https://sj.qq.com/appdetail/com.mm.example.starfamilypro",
        timeout: 1000,
        fallback: "https://xingjiaren-api.hailiangedu.com/app/download",
      };
      const callLib = new CallApp(options);
      callLib.open({
        param: {
          id: this.courseId,
        },
        path: "coursedetail",
      });
    },
  },
};
</script>
<style>
.float-wrap {
  position: relative;
  line-height: 56px;
  font-size: 10px;

  color: #ffffff;
  padding: 0.5px 20px 0 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.float-logo-wrap {
  width: 52px;
  height: 52px;
  margin: 0 10px 0 0;
  cursor: pointer;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.float-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.float-text {
  font-size: 20px;
}
.btn-group {
  position: fixed;
  right: 0;
  z-index: 1000;
  top: 20%;
  height: 56px;
  background: rgba(62, 129, 228, 0.9);
  border-radius: 100px 0px 0px 100px;
  overflow: hidden;
  margin-top: 40px;
}
.openApp {
  position: fixed;
  right: 0;
  top: 40%;
  z-index: 3;
  display: flex;
  align-items: center;
  background: red;
  color: #fff;
  font-size: 20px;
  border-radius: 100px 0 0 100px;
}
.openApp img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
}
.wrap {
  position: fixed;
  z-index: 9998;
  width: 100%;
}
.foster-list {
  width: 100%;
  /* padding: 10px; */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.foster-list-msg-list-msg1 {
  /* font-size: 16px; */
  color: #333;
  min-height: 50px;
  margin-top: 20px;
  height: auto;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.foster-list-msg-list {
  padding: 0 10px;
}

.foster-list-msg-list-msg2 {
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
}

.foster-list-msg-list-msg4 {
  margin: 20rpx 0;
  justify-content: space-between;
}

.foster-list-msg-list-msg4-left {
  /* font-size: 34rpx; */
  display: flex;
  align-items: center;
  padding: 30px 0;
}

.foster-list-msg-list-msg4-left .name {
  /* font-size: 20px; */
}

.foster-list-msg-list-msg4-left img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 20px;
}

.foster-list-msg-list-msg4-right {
  width: 60rpx;
  height: 44rpx;
}

.foster-list-msg-list-msg4-right img {
  width: 100%;
  height: 100%;
}

.foster-list-msg-list-msg3 {
  max-width: 160rpx;
  text-align: center;
  font-size: 22rpx;
  border-radius: 8rpx;
  opacity: 1;
  margin-top: 20rpx;
  color: blue;
  padding: 2rpx 9rpx;
  border: 1px solid red;
}

.foster-list-msg-img {
  height: 270rpx;
  /* height: 131px; */
  /* height: 200px; */
  border-radius: 20px 20px 0 0;
}

.foster-list-msg-img img {
  border-radius: 20px 20px 0 0;
  width: 100%;
  height: 100%;
}

.foster-list-msg {
  position: relative;
  width: 46%;
  margin: 15px;
  border-radius: 20px;

  background: #ffffff;
  box-shadow: 0px 4px 10px 0px rgba(202, 202, 202, 0.302);
}
.free {
  position: absolute;
  top: 27%;
  left: 0px;
  z-index: 2;
  /* background: #fff; */
  width: 60px;
  padding: 3px;
  font-size: 24px;
  text-align: center;
  color: #fff;
  background: #46b681;
  border-radius: 0 100px 100px 0;
  padding: 0 10px;
}
.liveing {
  position: absolute;
  top: 0;
  left: 30px;
  z-index: 2;
  background: #f05208;
  width: 60px;
  padding: 3px;
  color: #fff;
  font-size: 24px;
  text-align: center;
}
/* 新增覆盖层样式 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  justify-content: flex-end; /* 右侧对齐 */
  z-index: 1000;
  padding: 20px; /* 内边距，使内容与边缘保持一定距离 */
  z-index: 9999;
}
.overlay-content {
  position: relative;
  text-align: right; /* 右对齐文本 */
  padding: 50px;
  background: transparent; /* 透明背景 */
}

.topImg {
  width: 500px; /* 固定宽度 */
  height: 500px; /* 固定高度 */
  cursor: pointer;
}
</style>
<style>
.container {
  position: fixed;
  background: #f4f4f6;
  width: 100%;
  height: 100%;
}
</style>
